<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5525 - 青春活力的家</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <img src="img/宿舍logo.jpg" alt="宿舍 Logo">
            <h1>5525</h1>
            <h3>一个青春活力的家</h3>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E6%88%90%E5%91%98.html">宿舍成员</a>
                    <ul class="dropdown">
                        <li><a href="#">成员组成</a></li>
                        <li><a href="#">值日表</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E7%94%9F%E6%B4%BB.html">宿舍生活</a>
                    <ul class="dropdown">
                        <li><a href="#">每日小知识</a></li>
                        <li><a href="#">宿舍公约</a></li>
                        <li><a href="#">生活小贴士</a></li>
                        <li><a href="#">互动板块</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E6%95%85%E4%BA%8B.html">宿舍故事</a>
                    <ul class="dropdown">
                        <li><a href="#">宿舍心愿墙</a></li>
                        <li><a href="#">难忘时刻</a></li>
                        <li><a href="#">宿舍未来</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC.html">关于我们</a>
                    <ul class="dropdown">
                        <li><a href="#">活动投票</a></li>
                        <li><a href="#">留言板</a></li>
                        <li><a href="#">课程表</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="search-box">
            <input type="text" id="search-input" placeholder="搜索">
            <button onclick="searchOnBaidu()"><i class="fas fa-search"></i></button>
        </div>
    </header>

    <!-- 合照 -->
    <div class="group-photo">
        <img src="img/合照.jpg" alt="合照">
    </div>

    <!-- 主要内容区域 -->
    <main>
        <div class="intro-challenge-container">
            <!-- 宿舍简介 -->
            <section id="home" class="intro">
                <div class="intro-content">
                    <h2>宿舍简介</h2>
                    <p>欢迎来到
                        <strong>5525宿舍</strong>！我们是由6位来自同一专业的成员组成的温馨小家庭。在这里，我们不仅是室友，更是彼此的支持者和伙伴。宿舍是我们学习、生活和成长的共同空间，我们致力于营造一个<strong>团结、互助、充满活力</strong>的氛围。
                    </p>
                    <h3>我们的特色</h3>
                    <ul>
                        <li><strong>学习互助</strong>：大家互相督促，分享学习资源，共同进步。</li>
                        <li><strong>生活乐趣</strong>：从宿舍聚餐到节日庆祝，我们总能让平凡的日子充满欢声笑语。</li>
                    </ul>
                    <h3>我们的目标</h3>
                    <p>我们希望在大学时光中，不仅收获知识，更珍惜彼此的友谊。无论是学习上的挑战，还是生活中的点滴，我们都将携手并肩，一起迎接每一个明天。</p>
                </div>
            </section>

            <!-- 默契大挑战 -->
            <section class="challenge">
                <h2>默契大挑战</h2>
                <p>宿舍一起熬夜看的是什么？</p>
                <input type="text" id="answer" placeholder="请输入你的答案">
                <button onclick="checkAnswer()">提交答案</button>
                <p id="result"></p>
            </section>
        </div>

        <section class="news">
            <h2>宿舍动态</h2>
            <ul class="timeline">
                <li>
                    <span class="date">2025年1月1日</span>
                    <span class="event">相识第二年元旦大合照！</span>
                </li>
                <li>
                    <span class="date">2024年11月28日</span>
                    <span class="event">宿舍第一次聚餐！</span>
                </li>
                <li>
                    <span class="date">2024年10月11日</span>
                    <span class="event">与班级相识一周年活动圆满结束！</span>
                </li>
                <li>
                    <span class="date">2024年7月03日</span>
                    <span class="event">和班级第一次团建活动圆满结束！</span>
                </li>
                <li>
                    <span class="date">2024年4月24日</span>
                    <span class="event">查寝合照！</span>
                </li>
                <li>
                    <span class="date">2024年4月19日</span>
                    <span class="event">在宿舍庆生合照！</span>
                </li>
            </ul>
        </section>

        <!-- 精彩瞬间 -->
        <section class="moments">
            <h2>精彩瞬间</h2>
            <div class="slider">
                <div class="slides" id="slides">
                    <img src="img/大合照.jpg" alt="大合照">
                    <img src="img/宿舍合照.jpg" alt="宿舍合照">
                    <img src="img/舍友合照.jpg" alt="舍友合照">
                    <img src="img/微信图片_202503102334461.jpg" alt="微信图片">
                    <img src="img/查寝打卡.jpg" alt="查寝打卡">
                    <img src="img/操场合照.jpg" alt="操场合照">
                </div>
                <button class="prev" onclick="prevSlide()">&#10094;</button>
                <button class="next" onclick="nextSlide()">&#10095;</button>
            </div>
        </section>

        <!-- 友情链接 -->
        <section class="links">
            <h2>友情链接</h2>
            <ul>
                <li><a href="https://hceb.edu.cn/" target="_blank">学校官网</a></li>
                <li><a href="https://chatglm.cn/main/alltoolsdetail?lang=zh" target="_blank">智谱清言</a></li>
                <li><a href="https://www.douyin.com/" target="_blank">抖音官网</a></li>
                <li><a href="https://y.qq.com/" target="_blank">QQ音乐</a></li>
            </ul>
        </section>
    </main>

    <!-- 底部 -->
    <footer class="footer">
        <ul class="footer-menu">
            <li><a href="index.html">首页</a></li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E6%88%90%E5%91%98.html">宿舍成员</a>
                <ul class="dropdown">
                    <li><a href="#">成员组成</a></li>
                    <li><a href="#">值日表</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E7%94%9F%E6%B4%BB.html">宿舍生活</a>
                <ul class="dropdown">
                    <li><a href="#">每日小知识</a></li>
                    <li><a href="#">宿舍公约</a></li>
                    <li><a href="#">生活小贴士</a></li>
                    <li><a href="#">互动板块</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E6%95%85%E4%BA%8B.html">宿舍故事</a>
                <ul class="dropdown">
                    <li><a href="#">宿舍心愿墙</a></li>
                    <li><a href="#">难忘时刻</a></li>
                    <li><a href="#">宿舍未来</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC.html">关于我们</a>
                <ul class="dropdown">
                    <li><a href="#">活动投票</a></li>
                    <li><a href="#">留言板</a></li>
                    <li><a href="#">课程表</a></li>
                </ul>
            </li>
        </ul>
        <div class="footer-contact">
            <p>宿舍: 5525宿舍</p>
            <p>联系方式: dorm@example.com</p>
            <p>电话: 123-456-7890</p>
        </div>
        <div class="footer-copyright">
            <p>Copyright&copy;2025 5525宿舍版权所有</p>
        </div>
    </footer>
    <script>
        const slides = document.querySelectorAll('.slider img');
        let currentSlide = 0;

        function showSlide() {
            slides.forEach((slide, index) => {
                if (index === currentSlide) {
                    slide.classList.add('active');
                } else {
                    slide.classList.remove('active');
                }
            });
            currentSlide = (currentSlide + 1) % slides.length;
        }

        setInterval(showSlide, 3000);

        function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            showSlide();
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide();
        }

        function checkAnswer() {
            const answer = document.getElementById('answer').value;
            const correctAnswer = '看世界杯';
            const resultElement = document.getElementById('result');
            if (answer === correctAnswer) {
                resultElement.textContent = '答对啦，你和宿舍很有默契！';
                resultElement.classList.add('correct');
                resultElement.classList.remove('incorrect');
            } else {
                resultElement.textContent = '答错啦，正确答案是：' + correctAnswer;
                resultElement.classList.add('incorrect');
                resultElement.classList.remove('correct');
            }
        }

        function searchOnBaidu() {
            const searchInput = document.getElementById('search-input').value;
            const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(searchInput)}`;
            window.open(searchUrl, '_blank');
        }
    </script>
    <script src="轮播图.js"></script>
</body>

</html>